<!--  -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'
@Component({ name: 'CheckBox' })
export default class CheckBox extends Vue {
  @Model('change', { type: String }) private checked!: string
  @Watch('checked')
  private changes (val) {
    this.$emit('change', val);
    this.$children.forEach((item: any) => {
      if (item.label === val) {
        item.flagChange(true)
      } else {
        item.flagChange(false)
      }
    })
  }

  private mounted () {
    this.$children.forEach((item: any) => {
      if (item.label === this.checked) {
        item.flagChange(true)
      } else {
        item.flagChange(false)
      }
    })
  }
}
</script>
<style lang='stylus' scoped></style>
